<!--
  @description el-date-picker 配置的date-picker过滤器
  @author cjs1992
  @date 2020-07-13 10:01:59
-->
<template>
  <DatePicker
    ref="date_picker_ref"
    v-model="val"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>
<script>
import { DatePicker } from "element-ui";
export default {
  components: {
    DatePicker
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ["value"],
  data() {
    return {
      val: ""
    };
  },
  watch: {
    value(val) {
      this.setValueFunc();
    },
    val(val) {
      this.$emit("input", val);
    }
  },
  created() {
    this.setValueFunc();
  },
  methods: {
    /**
     * @name setValueFunc
     * @description 手动设置value为字符串
     * @param {}
     * @return {}
     * @author cjs1992
     * @date 2020-07-13 10:15:52
     */
    setValueFunc() {
      if (this.value === "" || this.value === null) {
        this.val = this.value;
        return;
      }
      if (this.$attrs.format || this.$attrs.valueFormat) {
        // 如果设置了format和valueFormat
        // 判断value是否是number
        if (Object.prototype.toString.call(this.value) === "[object Number]") {
          this.val = String(this.value);
        } else {
          this.val = this.value;
        }
      } else {
        this.val = this.value;
      }
    },
    /**
     * @name focus
     * @description 配置focus方法
     * @param {}
     * @return {}
     * @author cjs1992
     * @date 2020-07-13 10:13:14
     */
    focus() {
      this.$refs.date_picker_ref.focus();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
